<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            border: none;
        }

        body {
            background: #ecfaff;
        }

        .play {
            width: 470px;
            height: 150px;
            overflow: hidden;
            position: relative;
            margin: 150px auto 0;
        }

        .play .text {
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 60px;
        }

        .play .text div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: black;
            filter: alpha(opacity:40);
            opacity: 0.4;
            z-index: 99;
        }

        .play .text span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 60px;
            color: white;
            z-index: 999;
            text-align: center;
            font-size: 20px;
        }

        ol {
            position: absolute;
            right: 5px;
            bottom: 5px;
            z-index: 99999;
        }

        ol li {
            float: left;
            margin-right: 3px;
            display: inline;
            cursor: pointer;
            background: #fcf2cf;
            border: 1px solid #f47500;
            padding: 2px 6px;
            color: #d94b01;
            font-family: arial;
            font-size: 12px;
        }

        .active {
            padding: 3px 8px;
            font-weight: bold;
            color: #ffffff;
            background: #ffb442;
            position: relative;
            bottom: 2px;
        }

        ul {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }

        ul li {
            width: 470px;
            height: 150px;
            float: left;
        }

        ul img {
            float: left;
            width: 470px;
            height: 150px;
        }


    </style>
</head>
<div class="play" id="play">
    <ol>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
    <ul>
        <li><a href="http://www.zhinengshe.com/"><img src="images/7.jpg" alt="广告一" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/8.jpg" alt="广告二" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/9.jpg" alt="广告三" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/10.jpg" alt="广告四" /></a></li>
        <li><a href="http://www.zhinengshe.com/"><img src="images/11.jpg" alt="广告五" /></a></li>
    </ul>
</div>
<script src="js/util.js" type="text/javascript"></script>
<script type="text/javascript">

    var oDiv = document.getElementById('play');
    var oUl = document.getElementsByTagName('ul')[0];
    var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');


    var now = 0;

    for(var i=0;i<aBtn.length;i++){
        aBtn[i].index = i;
        aBtn[i].onclick = function () {

            now = this.index;
            tab();

        }

    }

    function tab() {

        for(var i=0;i<aBtn.length;i++){
            aBtn[i].className = '';
        }
        aBtn[now].className = 'active';
        startMove(oUl,{top:-150*now});
    }
    
    function next() {
        now++;
        if(now == aBtn.length){
            now = 0;
        }
        tab();
    }

    var timer = setInterval(next,2000);
    oDiv.onmouseover = function () {

        clearInterval(timer);

    };
    oDiv.onmouseout = function () {
        timer = setInterval(next,2000);
    }




















</script>
</body>
</html>